<template>
  <div>
    <job-list v-if="type==1" :idFu="idFu" @childHandle="childHandle"></job-list>
    <add-job v-if="type==2" :idFu="idFu" @childHandle="childHandle"></add-job>
    <edit-job v-if="type==3" :idFu="idFu" @childHandle="childHandle"></edit-job>
    <read-index v-if="type==4" :idFu="idFu" @childHandle="childHandle"></read-index>
  </div>
</template>

<script>
  import JobList from "@/components/CampSystem/CampOper/JobManage/JobList";
  import AddJob from "@/components/CampSystem/CampOper/JobManage/AddJob";
  import EditJob from "@/components/CampSystem/CampOper/JobManage/EditJob";
  import ReadIndex from "@/components/CampSystem/CampOper/JobManage/ReadIndex";

  export default {
    name: "JobIndex",
    components: {JobList, AddJob, EditJob, ReadIndex},
    props: {
      idFu: [String, Number]
    },
    data() {
      return {
        type: 1,
        active: null,
      };
    },
    created() {
      this.type = this.$route.query.type;
      this.active = this.$route.query.active;
    },
    methods: {
      childHandle(val){
        let that = this;
        that.type = val;
        that.$router.push({query: {id: that.idFu, active: that.active, type: val}});
      }
    },
    watch: {
      '$route': {
        handler(val) {
          const that = this;
          if (val.name == 'campManage') {
            if(val.query.type){
              that.type = val.query.type
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>
